<template>
  <el-card shadow="hover" class="Service box-card m-t20">
    <el-tabs tab-position="left" stretch class="demo-tabs">
      <el-tab-pane
        label="User"
        v-for="(item, i) in paneData.data"
        :key="item.a"
      >
        <template #label>
          <div
            :class="{ 'pane-1': true, notBd: i == paneData.data.length - 1 }"
          >
            <p>
              <span>Tracking code: </span>
              <span class="p13222">{{ item.a }}</span>
            </p>
            <p>
              <span>Shipping: </span>
              <span class="p13222">{{ item.b }}</span>
            </p>
            <p>
              <span>Tracking status: </span>
              <span class="p13222"
                ><div
                  :style="{
                    background: colorType[item.c],
                  }"
                  class="statusDiv"
                ></div>
                {{ item.c }}</span
              >
            </p>
            <!-- <el-button
              v-if="i == paneData.data.length - 1"
              class="addBt"
              type="Resended"
              @click="OpenADispute"
              >Resended</el-button
            > -->
            <div
              @click="OpenADispute"
              v-show="i == paneData.data.length - 1"
              class="stag"
            >
              Resended
            </div>
          </div>
        </template>
        <el-row class="mb-4 spaceBetween">
          <div>Product</div>
          <div class="w118">Number of shipment</div>
        </el-row>

        <el-divider />
        <el-row class="mb-4 spaceBetween">
          <OrderProduct :scope="''" />

          <div class="w118">{{ item.c }}</div>
        </el-row>
        <div class="p-22214 m-t20 m-b20">Parcel tracking information</div>
        <el-timeline>
          <el-timeline-item
            v-for="(d, index) in item.d"
            :key="index"
            :timestamp="d.content"
            :color="d.color"
          >
            {{ d.timestamp }}
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import OrderProduct from "@/components/OrderTable/orderProduct.vue";
import { useRouter } from "vue-router";
const $router = useRouter();
const OpenADispute = () => {
  $router.push({
    path: "/Order/ScaleOrder/Dispute",
    query: { type: "Resended" },
  });
};

// 简单处理 后面根据接口字段
let colorType = {
  运输中: "#2869CB",
  已妥投: "#427F11",
  妥投失败: "#BC1F22",
};
const paneData = reactive({
  data: [
    {
      a: "DYT2317221272108951",
      b: "SFC-SFC Special line",
      c: "运输中",
      d: [
        {
          content:
            "Departure from inward Office of ExchangeDeparture from inward Office ",
          timestamp: "2022-08-25",
          color: "#000",
        },
        {
          content:
            "Departure from inward Office of ExchangeDeparture from inward Office ",
          timestamp: "2018-04-24",
        },
        {
          content:
            "Departure from inward Office of ExchangeDeparture from inward Office ",
          timestamp: "2018-04-23",
        },
      ],
    },
    {
      a: "DYT2317221272108951",
      b: "SFC-SFC Special line",
      c: "已妥投",
      d: [
        {
          content: "1233",
          timestamp: "2022-08-25",
          color: "#000",
        },
        {
          content: "1232",
          timestamp: "2018-04-24",
        },
        {
          content: "1231",
          timestamp: "2018-04-23",
        },
      ],
    },
    {
      a: "DYT2317221272108951",
      b: "SFC-SFC Special line",
      c: "妥投失败",
      d: [
        {
          content: "312312",
          timestamp: "2022-08-25",
          color: "#000",
        },
        {
          content: "212321",
          timestamp: "2018-04-24",
        },
        {
          content: "112321",
          timestamp: "2018-04-23",
        },
      ],
    },
    {
      a: "DYT2317221272108951",
      b: "SFC-SFC Special line",
      c: "妥投失败",
      d: [
        {
          content: "312312",
          timestamp: "2022-08-25",
          color: "#000",
        },
        {
          content: "212321",
          timestamp: "2018-04-24",
        },
        {
          content: "112321",
          timestamp: "2018-04-23",
        },
      ],
    },
    {
      a: "DYT2317221272108951",
      b: "SFC-SFC Special line",
      c: "妥投失败",
      d: [
        {
          content: "312312",
          timestamp: "2022-08-25",
          color: "#000",
        },
        {
          content: "212321",
          timestamp: "2018-04-24",
        },
        {
          content: "112321",
          timestamp: "2018-04-23",
        },
      ],
    },
    {
      a: "DYT2317221272108951",
      b: "SFC-SFC Special line",
      c: "妥投失败",
      d: [
        {
          content: "312312",
          timestamp: "2022-08-25",
          color: "#000",
        },
        {
          content: "212321",
          timestamp: "2018-04-24",
        },
        {
          content: "112321",
          timestamp: "2018-04-23",
        },
      ],
    },
    {
      a: "DYT2317221272108951",
      b: "SFC-SFC Special line",
      c: "妥投失败",
      d: [
        {
          content: "312312",
          timestamp: "2022-08-25",
          color: "#000",
        },
        {
          content: "212321",
          timestamp: "2018-04-24",
        },
        {
          content: "112321",
          timestamp: "2018-04-23",
        },
      ],
    },

    {
      a: "DYT2317221272108951",
      b: "SFC-SFC Special line",
      c: "妥投失败",
      d: [
        {
          content: "312312",
          timestamp: "2022-08-25",
          color: "#000",
        },
        {
          content: "212321",
          timestamp: "2018-04-24",
        },
        {
          content: "112321",
          timestamp: "2018-04-23",
        },
      ],
    },
    {
      a: "DYT2317221272108951",
      b: "SFC-SFC Special line",
      c: "妥投失败",
      d: [
        {
          content: "312312",
          timestamp: "2022-08-25",
          color: "#000",
        },
        {
          content: "212321",
          timestamp: "2018-04-24",
        },
        {
          content: "112321",
          timestamp: "2018-04-23",
        },
      ],
    },
  ],
});
</script>

<style lang="scss" scoped>
.Service {
  margin: 20px 0;
}
.w118 {
  width: 118px;
  text-align: right;
}
::v-deep .el-card__body {
  padding: 0px;
  .card-left {
    padding: 20px;
  }
}
.demo-tabs {
  .stag {
    height: 22px;
    width: 74px;
    line-height: 22px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #e8813b !important;
    background: #fff;
    margin-top: 10px;
    color: #e8813b !important;

    /* 文字/13px-Regular */
    font-size: 13px;
    font-weight: 400;
  }
  .statusDiv {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: relative;
    top: -1px;
  }
  color: var(--unnamed, #777);
  font-size: 13px;
  padding: 20px 0;
  .el-row {
    flex-wrap: inherit;
  }
  .el-divider--horizontal {
    margin: 20px 0;
  }
  .pane-1 {
    border-bottom: 1px solid #ebeef5;

    padding: 15px 50px 15px 20px;
    width: auto;
    text-align: left;
    p {
      line-height: 24px;
    }
    span {
      display: inline-block;
      width: 100px;
      text-align: left;
      margin-right: 20px;
      color: var(--unnamed, #777);
      font-size: 13px;
    }
  }
  .notBd {
    border-bottom: none;
  }
  .pane-1:active,
  .pane-1:hover {
    background: var(--unnamed, #f5f5f5);
  }
  ::v-deep .el-tabs__item {
    padding: 0;
    height: auto !important;
  }
  ::v-deep .el-tabs__content {
    padding: 20px 20px 0 10px;
  }

  .el-button--Resended {
    margin: 15px 0;
  }
  .m-t20 {
    margin-top: 20px;
  }
}
</style>
